<template>
  <Row>
    <Alert>{{date1}}-{{date3}} {{time1}}-{{time2}}</Alert>

    <Col span="12">
      <h3>选择某个时间点</h3>
      <DatePicker
        type="datetime"
        placeholder="Select date"
        style="width: 200px"
        format="yyyy/MM/dd HH:mm"
        :time-picker-options="{steps: [0, 30]}"
      ></DatePicker>
    </Col>
    <Col span="12">
      <h3>选择某个时间范围</h3>
      <DatePicker
        type="datetimerange"
        format="yyyy/MM/dd HH:mm"
        placeholder="Select date and time(Excluding seconds)"
        show-week-numbers
        style="width: 200px"
        :time-picker-options="{steps: [0, 30]}"
      ></DatePicker>
    </Col>
    <Col span="6">
      <h3>选择某个时间范围</h3>
      <DatePicker type="date" placeholder="Select date" style="width: 200px"></DatePicker>
    </Col>
    <Col span="6">
      <h3>选择某个日期范围</h3>
      <Select v-model="date.select" prefix="ios-home" style="width:200px">
        <Option v-for="item in date.list" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
    </Col>
    <Col span="6">
      <h3>选择某个时间范围</h3>
      <Select v-model="time.select" prefix="ios-home" style="width:200px">
        <Option v-for="item in time.list" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
    </Col>
  </Row>
</template>
<script>
import { format } from 'path'
export default {
  name: 'rangDateTime',
  data () {
    return {
      date: {
        select: '',
        list: [
          {
            value: '9月27日',
            label: '9月27日'
          },
          {
            value: '9月28日',
            label: '9月28日'
          },
          {
            value: '9月30日',
            label: '9月30日'
          }
        ]
      },
      time: {
        select: '',
        list: []
      },

      date1: '9月28日',
      date2: '9月29日',
      date3: '9月30日',
      time1: '09:00',
      time2: '17:00'
    }
  },
  methods: {
    init () {
      this.time.list = this.timeList()
    },
    timeList () {
      let arr = [];
      let start = 8, end = 16, a = ''// 起点与终点
      for (let i = start; i <= end; i++) {
        // if(i==12) continue;//12点不预约
        a = (i < 10 ? '0' + i : i) + ':00'
        arr.push({ 'label': a, 'value': a })
      }
      return arr
    }
  },
  mounted () {
    this.init()
  }

}
</script>
<style lang='less'>
.ivu-select-selection{
  background-color: aquamarine;
}
.ivu-col {
  margin-bottom: 20px;
}
</style>
